<template>
  <div>
    <ul class="chart-list">
      <template v-for="item in data">
        <li :key="item.id">
          <div class="top">
            <div class="top-list">
              <div class="list-item top-status">
                <div>
                  <span class="name">{{item.patientName}}</span>
                  <span>{{ getPatientSex(item.patientSex) }}</span>
                  <span>{{ item.patientAge }}</span>
                </div>
                <div class="state">
                  <template v-if="item.oldOrderNo">
                    <span class="status status-5">补发单</span>
                  </template>
                  <template v-if="item.payStatus === 3 || item.payStatus === 4">
                    <template v-if="item.refundFlag === 1">
                      <span class="status status-4">未处理</span>
                    </template>
                    <template v-else>
                      <span class="status status-3">已处理</span>
                    </template>
                  </template>
                  <template v-else-if="item.deliveryType === 1">
                    <span class="status status-1">邮寄</span>
                  </template>
                  <template v-else>
                    <span class="status status-2">自提</span>
                  </template>
                </div>
              </div>
              <div class="list-item">支付时间：<span>{{ item.payTime }}</span></div>
              <div class="list-item">开方医生：<span>{{ item.docName }}</span></div>
              <div class="list-item">处方来源：<span>{{ item.source}}/{{ item.sourceStoreName }}</span></div>
              <div class="list-item">支付金额：<span>{{ formatMoney(item.totalFee - item.cirulationCost) }}</span></div>
              <template v-if="item.remark">
                <div class="list-item">订单备注：<span :title="item.remark">{{ item.remark }}</span></div>
              </template>
              <template v-else>
                <div class="list-item">订单备注：</div>
              </template>
            </div>
          </div>
          <div class="details">
            <template v-for="btn in item.btns">
              <el-col
                :span="btn.colSpan"
                :key="btn.id"
              >
                <div
                  @click="onRowHandle(btn)"
                >
                  <span>{{ btn.text }}</span>
                </div>
              </el-col>
            </template>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { getPatientSex, formatMoney } from "@/utils/index";
import dosageForm from "./dosageForm.vue";

export default {
  name: "chartList",
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  components: { dosageForm },
  data() {
    return {};
  },
  methods: {
    getPatientSex,
    onOperateClick(operate, id) {
      this.$emit("operate", operate, id);
    },
    onRowHandle(btn) {
      btn.handle.apply(this, btn.params);
    },
    formatMoney(val) {
      let res = formatMoney(val, 2);
      return res;
    },
  }
}
</script>

<style lang="scss" scoped>
.chart-list {
  padding: 0 10px 10px 0;
  flex-flow: wrap;
  display: flex;

  li {
    border: 1px solid #fff;
    width: calc(20% - 10px);
    margin-bottom: 10px;
    border-radius: 4px;
    position: relative;
    margin-left: 10px;
    list-style: none;
    font-size: 13px;
    color: #666;

    &:hover {
      border-color: #1881DD;
    }

    .top {
      border-top-right-radius: 4px;
      border-top-left-radius: 4px;
      border: 1px solid #d3d5db;
      box-sizing: border-box;
      border-bottom: none;
      
      padding: 10px;
      display: flex;
      width: 100%;

      .top-list {
        width: 100%;

        .list-item {
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: nowrap;
          padding-bottom: 7px;
          overflow: hidden;
          font-size: 14px;
          width: 100%;
          color: #333;
          margin: 0;

          &:nth-child(1) {
            padding-bottom: 6px;
            font-weight: bold;
            color: #333;

            span {
              font-size: 14px;
              color: #333;
            }
          }

          &:last-child {
            padding-bottom: 0;
          }

          span {
            color: #333;

            &.name {
              font-size: 16px;
            }
          }

          &.top-status {
            justify-content: space-between;
            display: flex;

            .state {
              line-height: 22px;
              color: #fff;
              display: flex;

              div {
                border-radius: 11px;
                text-align: center;
                margin-left: 10px;
                padding: 0 12px;
              }

              span {
                font-weight: 400;
                color: #FFF;

                &.status {
                  border-radius: 20px;
                  margin-left: 5px;
                  padding: 0 15px;
                  font-size: 12px;
                }

                &.status-1 {
                  background-color: #54ADEC;
                }

                &.status-2 {
                  border: 1px solid #54ADEC;
                  color: #54ADEC;
                }

                &.status-3 {
                  border: 1px solid #42d885;
                  color: #42d885;
                }

                &.status-4 {
                  background-color: #f56c6c;
                }

                &.status-5 {
                  border: 1px solid #faecd8;
                  background-color: #fdf6ec;
                  color: #e6a23c;
                }
              }

              span.status:first-child,
              div:first-child {
                margin-left: 0;
              }
            }
          }
        }
      }
    }

    .details {
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
      border: 1px solid #d3d5db;
      background: #edf0f2;
      justify-content: center;
      overflow: hidden;
      display: flex;

      div {
        background: #edf0f2;
        text-align: center;
        font-weight: bold;
        line-height: 36px;
        cursor: pointer;
        color: #555;
        height: 36px;

        &:hover {
          color: #1881dd;
        }
      }

      .el-col {
        border-right: 1px solid #dcdfe6;

        &:last-child {
          border-right: 0;
        }
      }

      i {
        font-weight: bold;
        font-size: 16px;
        padding: 0 5px;
      }
    }
  }
}
</style>